<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>HyperCMF后台登录</title>
    <link rel="shortcut icon" href="/static/favicon.ico">
    <script src="/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/js/base.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <script src="/static/layui/layui.2.7.6.js"></script>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>
        if(window.top!==window.self){window.top.location=window.location};
    </script>
    <style>
        html,body{
            height: 100%;
        }
        body{
            background: url(/static/images/bg.png) no-repeat; background-size: cover;height: 100%;background-position: center center;
        }
        .login-box{
            padding: 30px;position: absolute;top: 20%;right: 20%;background-color: rgba(255,255,255,0.5);
        }
        .slider{
            margin-left: 0 !important;
            width: 90%;
        }
        @media screen and (max-width: 768px) {
            .login-box{
                padding: 30px;
                width: 80%;
                position: absolute;
                right: 0;
                top: 20%;
                justify-content: center;
                align-items: center;
                background-color: rgba(255,255,255,0.5)
            }
            .slider{
                margin-left: 35% !important;
                width: 63%;
            }
        }
    </style>
</head>

<body style="">
    <div class="layui-bg-white login-box">
        <div class="layui-row">
            <div class="">
                <form  class="layui-form" action="" lay-filter="formFilter" >
                    <div class="layui-form-item" style="text-align: center;">
                        <div class="layui-inline">
                            <H2 class="m-t-md" id="err_msg">HyperCMF管理平台</H2>

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <!--                        <label class="layui-form-label">账号</label>-->
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" lay-verify="username" placeholder="账号" name="username" required id="user_name" />
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <!--                        <label class="layui-form-label">密码</label>-->
                            <div class="layui-input-inline">
                                <input type="password"  class="layui-input" lay-verify="password" placeholder="密码" name="password" required id="password" />
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block slider">
                            <!-- <label class="layui-form-label">滑动验证</label>-->
                            <div id="slider" style="width:200px;display: block !important;"></div>
                        </div>
                    </div>
<!--                    <div class="layui-form-item">-->
<!--                        &lt;!&ndash;                    <label class="layui-form-label">验证码</label>&ndash;&gt;-->
<!--                        <div class="layui-input-inline">-->
<!--                            <input type="text" name="vercode" lay-verify="required" autocomplete="off" class="layui-input">-->
<!--                        </div>-->
<!--                        <div class="layui-form-mid" style="padding: 0!important;">-->
<!--                            <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="lay-form"  style="width: 190px;">登录</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
    <div class="layui-row" style="position: absolute;bottom: 5%;right:5%">
        <div class="pull-left">
            &copy; 2022-<span id="currentYear"></span> All Rights Reserved HyperCMF.
        </div>
    </div>

<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/static/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    document.onkeydown=function(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==13){ // enter 键
            $('#login_btn').click();
        }
    };
    layui.config({
        base: '/static/layui/module/'
    }).use(['form','layer','sliderVerify'], function() {
        var form = layui.form;
        var layer = layui.layer;
        var sliderVerify = layui.sliderVerify,
            $ = layui.jquery,
            form = layui.form;
        var slider = sliderVerify.render({
            elem: '#slider',
            onOk: function(){//当验证通过回调
                layer.msg("滑块验证通过");
            }
        })
        $('#reset').on('click',function(){
            slider.reset();
        })
        form.verify({
            username: function(value){
                if(value.length < 2){
                    return '请输入用户名';
                }
            }
            ,password: [
                /^[\S]{4,12}$/
                ,'密码必须4到20位，且不能出现空格'
            ]
        });
        form.on('submit(lay-form)',function (data) {
            console.log('aaa',data)
            var a = Math.ceil(Math.random()*100)
            if(!slider.isOk()){
                layer.msg("请先通过滑块验证");
                return false;
            }
            var load = layer.load(1, {
                shade: [0.3,'#fff'] //0.1透明度的白色背景
            });
            $.ajax({
                url: "/admin/login/login",
                data: data.field,
                method: 'get',
                success: function (res) {
                    layer.close(load)
                    if (res.code != 1) {
                        layer.msg(res.msg)
                        return;
                    } else {

                        layer.msg('登陆成功')

                        localStorage.setItem('avatar', res.data.avatar)
                        localStorage.setItem('token', res.data.token)
                        localStorage.setItem('hypercmfname', data.field.username)
                        localStorage.setItem('menu', JSON.stringify(res.data.menu))
                        localStorage.setItem('token_expire_time', +new Date() + 3600 * 24 * 1000)
                        setTimeout(function () {
                            window.location.href = '/admin/index.html';
                        }, 2000)
                    }

                },
            });
            return false;

        })
    })

</script>
<script>
    var expire = localStorage.getItem('token_expire_time')
    var token = localStorage.getItem('token')
    if(token!=undefined && expire!=undefined && expire> +new Date()){
        layer.confirm('已登录提醒', {
            btn: ['确定'] //按钮
        }, function(){
            window.location.href='/admin/index.html';
        })
    }
    var year = new Date().getFullYear()
    $("#currentYear").text(year)
</script>
</body>
</html>
